import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaAlertPage, WeaLocaleProvider } from 'ecCom';
import { createAttachLi } from '../../../util/CoworkUtil';
import { Spin } from 'antd';

const getLabel = WeaLocaleProvider.getLabel;

@inject('coworkMainStore')
@observer
class Resource extends React.Component {
  constructor(props) {
    super(props);
  }

  // 1 写一个componentDidMount，通过getCoworkDiscussData方法从store取数据
  componentDidMount() {
    const { coworkMainStore } = this.props;
    coworkMainStore.getCoworkDiscussData();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.coworkId != this.props.coworkId) {
      const { coworkMainStore } = this.props;
      coworkMainStore.getCoworkDiscussData();
    }
  }

  render() {
    // 4 传参
    const { coworkMainStore } = this.props;
    let { resource } = coworkMainStore;
    resource = toJS(resource);
    if (!resource.readed) {
      return (
        <div className="top40 align-center"><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@5qgaia`} /></div>
      );
    }
    let Document,
Workflow,
Customer,
Project,
Task,
Accessory;
    // 相关文档
    resource.docList && (
      Document = resource.docList.map(item => (
          <li className="text-elli"><a href={item.url} target="_blank" title={item.name}>{item.name}</a></li>
        )));

    // 相关流程
    resource.wfList && (
      Workflow = resource.wfList.map(item => (
          <li className="text-elli"><a href={item.url} target="_blank" title={item.name}>{item.name}</a></li>
        )));

    // 相关客戶
    resource.cusList && (
      Customer = resource.cusList.map(item => (
          <li className="text-elli"><a href={item.url} target="_blank" title={item.name}>{item.name}</a></li>
        )));

    // 相关項目
    resource.mutilprjList && (
      Project = resource.mutilprjList.map(item => (
          <li className="text-elli"><a href={item.url} target="_blank" title={item.name}>{item.name}</a></li>
        )));

    // 相关任务
    resource.taskList && (
      Task = resource.taskList.map(item => (
          <li className="text-elli">
            <a href={item.url} target="_blank" title={item.name}>{item.name}</a>
          </li>
        )));

    // 相关附件
    resource.accList && (
      Accessory = resource.accList.map(createAttachLi));

    return (
      ((resource.docList && resource.docList.length !== 0) || (resource.wfList && resource.wfList.length !== 0) ||
      (resource.cusList && resource.cusList.length !== 0) || (resource.mutilprjList && resource.mutilprjList.length !== 0) ||
      (resource.taskList && resource.taskList.length !== 0) || (resource.accList && resource.accList.length !== 0)) ? (
        <div className="cowork-content-resource cowork-content-style-public">
          {
            (resource.docList && resource.docList.length !== 0) && (
              <div>
                <div className="cowork-content-pub cowork-content-doc">
                  <em className="icon-coms-currency2" />
                  <span>{getLabel(857, '相关文档')}</span>
                </div>
                <ul className="cowork-content-public cowork-content-document">
                  {Document}
                  {/* <li><a>E8-DEMO网站需要修正的地方</a></li>
                   <li><a>E8-DEMO网站需要修正的地方</a></li>
                   <li><a>demo9档案</a></li> */}
                </ul>
              </div>
            )
          }

          {(resource.wfList && resource.wfList.length !== 0) && (
            <div>
              <div className="cowork-content-pub cowork-content-workflow">
                <em className="icon-coms-Relevant-workflow" />
                <span>{getLabel(1044, '相关流程')}</span>
              </div>
              <ul className="cowork-content-public cowork-content-document">
                {Workflow}
              </ul>
            </div>
          )}

          {(resource.cusList && resource.cusList.length !== 0) && (
            <div>
              <div className="cowork-content-pub cowork-content-customer">
                <em className="icon-coms-Relevant-Customer" />
                <span>{getLabel(783, '相关客户')}</span>
              </div>
              <ul className="cowork-content-public cowork-content-document">
                {Customer}
              </ul>
            </div>
          )}

          {(resource.mutilprjList && resource.mutilprjList.length !== 0) && (
            <div>
              <div className="cowork-content-pub cowork-content-project">
                <em className="icon-coms-Relevant-project" />
                <span>{getLabel(782, '相关项目')}</span>
              </div>
              <ul className="cowork-content-public cowork-content-document">
                {Project}
              </ul>
            </div>
          )}

          {(resource.taskList && resource.taskList.length !== 0) && (
            <div>
              <div className="cowork-content-pub cowork-content-task">
                <em className="icon-coms-Relevant-task" />
                <span>{getLabel(33414, '相关任务')}</span>
              </div>
              <ul className="cowork-content-public cowork-content-document">
                {Task}
              </ul>
            </div>
          )}

          {(resource.accList && resource.accList.length !== 0) && (
            <div>
              <div className="cowork-content-pub cowork-content-acc">
                <em className="icon-coms-Enclosure" />
                <span>{getLabel(22194, '相关附件')}</span>
              </div>
              <ul className="cowork-content-public cowork-content-accessory">
                {Accessory}
                {/* <li>
                 <a>E8-DEMO网站需要修正的地方</a>
                 <i className='icon-coms-download'></i>
                 <span>2345K</span>
                 </li> */}
              </ul>
            </div>
          )}


        </div>) : (
        <div style={{ height: window.innerHeight }}>
          <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@4cle7a`} icon="icon-coms-blank" paddingTop="40px">
            <div>{getLabel(83553, '暂无数据')}</div>
          </WeaAlertPage>
        </div>
      ));
  }
}

export default Resource;
